<div class="row">
  <div class="offset-md-3 col-md-6">
    <div class="card">
      <div class="card-header">
        <h1>{{ $ctrl.name }}</h1>
      </div>
      <div class="card-block">
        <form id="form" name="form" class="form" ng-submit="$ctrl.signin()" novalidate>
          <div class="form-group" ng-class="{'has-danger':form.username.$invalid && !form.username.$pristine}">
            <label class="form-control-label" for="username">{{'username'}}</label>
            <input class="form-control" id="username" name="username" ng-model="$ctrl.data.username" required/>
            <div class="form-control-feedback" ng-messages="form.username.$error" ng-if="form.username.$invalid && !form.username.$pristine">
              <p ng-message="required">Username is required</p>
            </div>
          </div>
          <div class="form-group" ng-class="{'has-danger':form.password.$invalid && !form.password.$pristine}">
            <label class="form-control-label" for="password">{{'password'}}</label>

            <input class="form-control" type="password" name="password" id="password" ng-model="$ctrl.data.password" required/>
            <div class="form-control-feedback" ng-messages="form.password.$error" ng-if="form.password.$invalid && !form.password.$pristine">
              <p ng-message="required">Password is required</p>
            </div>

          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-success btn-lg" ng-disabled="form.$invalid || form.$pending">  {{'SIGN IN'}}
          </div>
        </form>
      </div>
      <div class="card-footer">
        Not registered, <a href="#" ui-sref="app.signup">{{'signup'}}</a>
      </div>
    </div>
  </div>
</div>
